<template>
  <div class="container">
    <header class="header">
      <ul>
        <li>
          <a href="javascript:window.history.back()">
            <span class="icon">&#xe738;</span>
          </a>
        </li>
        <li>
          <h1>房源预约</h1>
        </li>
        <li></li>
      </ul>
    </header>
    <div class="top">
      <img src="images/home1.png" class="fl" />
      <div class="top-r fr">
        <h1>整租·包图软件园二期 1室1厅</h1>
        <h3>次卧A·15m2 西南</h3>
        <p>
          <span>2000</span>
          <span>元/月</span>
          <span>服务费:130元</span>
        </p>
      </div>
      <div class="clear"></div>
    </div>
    <form action @submit.prevent="sub">
      <section>
        <h1>
          选择预约看房时间
          <input class="form-control" type="text" id="date-time" placeholder="请选择预约日期" />
        </h1>
        <div id="time"></div>
        <h1>联系方式</h1>
        <div class="tel">
          <input type="text" name="tel" maxlength="13" value="13888888888" placeholder="请输入联系方式" />
          <span>更改联系方式</span>
        </div>
        <div class="username">
          <input type="text" name="username" maxlength="20" placeholder="请填写真实姓名" />
        </div>
      </section>
      <footer>
        <button class="btn" type="submit">立即预约</button>
        <p>地址:包图省包图市国际采购中心包图地铁站B出口500米</p>
      </footer>
    </form>
  </div>
</template>

<script>
import Rolldate from "rolldate";
import $ from "jquery";
export default {
  name: "",
  components: {},
  methods: {
    // 日期挂件
    getRolldate() {
      var lang = {
        title: "选择预约日期",
      };
      var d = new Date();
      new Rolldate({
        el: "#date-time",
        format: "YYYY-MM-DD hh:mm",
        beginYear: 2020,
        endYear: 2021,
        minStep: 30,
        lang: lang,
        value:
          d.getFullYear() +
          "-" +
          (d.getMonth() + 1) +
          "-" +
          d.getDate() +
          " " +
          d.getHours() +
          ":" +
          (d.getMinutes() > 30 ? "00" : "30"),
        confirm: function (date) {
          var d1, d2;
          (d1 = new Date(date.replace(/-/g, "/"))),
            (d2 = new Date(
              d.getFullYear() +
                "/" +
                (d.getMonth() + 1) +
                "/" +
                d.getDate() +
                " " +
                d.getHours() +
                ":" +
                d.getMinutes()
            )); //如果非'YYYY-MM-DD'格式，需要另做调整
          if (d1 < d2) {
            alert("不能小于当前的日期,请重新选择");
            return false;
          }
        },
        moveEnd: function () {
          // console.log(scroll)
          // console.log('滚动结束');
          $(".rolldate-confirm").trigger("click");
        },
      });
      $("#date-time").trigger("click");
    },
    // 表单验证
    sub() {
      var tel = $("input[name='tel']").val();
      var username = $("input[name='username']").val();
      if (!/^1[3456789]\d{9}$/.test(tel)) {
        alert("请输入正确的手机号码");
        return false;
      }
      if (!/^[\u2E80-\u9FFF]+$/.test(username)) {
        alert("请输入正确的姓名");
        return false;
      }
      // 提交数据
      /**
            this.$axios({
                method: 'post',
                url: 'abc.php', // 测试
                data:{
                    date: this.date,
                    tel: this.tel,
                    username: this.username
                },// json对象
				transformRequest: [function (data) {
                    // 这块能让数据是以表单的形式提交
                    let ret = '';
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
                    }
                    return ret;
                }],
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then((res)=>{
                console.log(res);

            }).catch((error)=>{
                console.log(error);
            });
            **/
    },
  },
  mounted() {
    this.getRolldate();
  },
};
</script>

<style src="../assets/css/homeappoint.css" scoped></style>
<style scoped>
.container {
  position: relative;
  z-index: 9;
}
</style>
